<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账户明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/common.css" rel="stylesheet">
    <link href="layui/css/layui.css" rel="stylesheet">
    <style>
        .layui-tab{
            margin: 0px;
        }
        .layui-tab-title li{
            min-width: 24%;
            padding: 0;
            border-right: 1px solid #fff;
        }
        .layui-tab-title li:last-child{
            border-right:none;
        }
        .layui-tab-brief>.layui-tab-title .layui-this{
            background: #fff;
            /*color: #eb6d10;*/
        }
        .layui-tab-brief>.layui-tab-title .layui-this:after{
            /*border-bottom: 2px solid #eb6d10;*/
        }
        .layui-tab-content{
            padding: 0px;
        }
        .order-div{
            background: #fff;
            padding: 3vw;
            margin-bottom: 1.5vw;
        }
        .order-div table{
            width: 100%;
            height: 35px;
        }
        .order-div .tips{
            padding: 0px;
        }
        .tr-0{
            height: 0px;
        }
        .order-div .yellow{
            color: #f69f08;
        }
        .pageScroll{
            height: 85.5vh;
            overflow: auto;
        }
    </style>

</head>
<body>
<div class="head-nav">
    <div class="nav-left" onclick="javascript:history.back(-1)"><img src="img/gua/u18.png"></div>
    <div class="nav-title">账户明细</div>
</div>
<div class="main">
    <div class="layui-tab layui-tab-brief" lay-filter="accountTab">
        <ul class="layui-tab-title">
            <li class="layui-this" id="allLi" lay-id="listAll"  data-value="0">全部(<span id="listAllSpan"></span>)</li>
            <li lay-id="reward" id="rewardLi"  data-value="3">返奖(<span id="rewardSpan"></span>)</li>
            <li lay-id="withDraw" id="withDrawLi"  data-value="2">提现(<span id="withDrawSpan"></span>)</li>
            <li lay-id="recharge" id="rechargeLi"  data-value="1">充值(<span id="rechargeSpan"></span>)</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" id="listAll">
                <div class="pageScroll">
                    <div id="orderList">
                    </div>
                    <div id="pagination"></div>
                </div>
            </div>
            <div class="layui-tab-item" id="reward">
                <div class="pageScroll">
                    <div id="orderList">
                    </div>
                    <div id="pagination"></div>
                </div>
            </div>
            <div class="layui-tab-item" id="withDraw">
                <div class="pageScroll">
                    <div id="orderList">
                    </div>
                    <div id="pagination"></div>
                </div>
            </div>
            <div class="layui-tab-item" id="recharge">
                <div class="pageScroll">
                    <div id="orderList">
                    </div>
                    <div id="pagination"></div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/order">
    <div class="order-div">
       <table>
            <tr>
                <td width="22%">{type_name}</td>
                <td width="45%" class="center">{create_time}</td>
                <td class="center yellow">{money}元</td>
            </tr>
            <tr class="tr-0">
                <td colspan="3" class="tips">{shop_name}</td>
            </tr>
        </table>
    </div>
</script>

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script src="layui/layui.js"></script>

<script type="application/javascript">
    $(function () {
        //页面初始化的时候全部加载一页
        queryList($("#allLi"));
        queryList($("#rewardLi"));
        queryList($("#withDrawLi"));
        queryList($("#rechargeLi"));
    });

    layui.use('element', function(){
        var element = layui.element;
        //监听Tab切换，
        element.on('tab(accountTab)', function(){
            queryList(this);
        });
    });

    //全部
    function queryList(me) {
        var userId = $.cookie("userId");
        //var userId = "aa11";
        var layid = $(me).attr("lay-id");
        var group = $(me).attr("data-value");
        var $flowmore = $("#"+layid).find("#pagination").find(".layui-flow-more");
        //能找到说明已经初始化过分页对象
        if($flowmore.length>0){
            return;
        }

        var paramStr = {};
        paramStr.userId = userId;
        paramStr.typeGroup = group;
        paramStr.pageLimit = 10;
        paramStr.pageStart = 0;
        var params = {};
        params.paramStr =  JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/game/getGameOrderNotice", params, function(data) {
            console.log(data);
            $("#"+layid+"Span").text(data.pageTotal);//显示总条数
            var $list = $("#"+layid).find("#orderList");
            var $pagination = $("#"+layid).find("#pagination");
            $list.empty();
            drawList($list,data.datas);
            //分页
            layui.use('flow', function(){
                var flow = layui.flow;
                flow.load({
                    elem: $pagination //指定列表容器
                    ,isAuto:false  //是否自动加载
                    , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                        if(page!=1){
                            paramStr.pageStart = (page-1)*paramStr.pageLimit;
                            var p = {};
                            p.paramStr = JSON.stringify(paramStr);
                            Common.ajaxWithParam("/fenful/api/v1/game/getGameOrderNotice",p,function (d2) {
                                drawList($list,d2.datas);
                            });
                        }
                        next('', (page*paramStr.pageLimit) < data.pageTotal);
                    }
                });
            });

        });

    }

    function drawList(me,list) {
        if(list.length==0){
            $(me).append("暂无记录");
        }else{
            var html = $("script[type='text/order']").html();
            for(var index in list){
                var htmlStr = Common.formatTemplate(list[index],html,"");
                $(me).append(htmlStr);
            }
        }
    }

</script>

</body>
</html>